<template>
  <div class="log-list">
    <div class="title">日志列表</div>

    <el-table :data="logData" style="width: 100%" stripe>
      <el-table-column prop="time" label="时间" min-width="300px"></el-table-column>
      <el-table-column prop="username" label="用户名" min-width="180px"></el-table-column>
      <el-table-column prop="operation" label="操作" min-width="180px"></el-table-column>
      <el-table-column prop="IP" label="IP" min-width="300px"></el-table-column>
    </el-table>

    <div class="pagination-wrapper">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Log",
  data() {
    return {
      userInfo: {},  // 用户信息
      logData: [],


      // 分页
      currPage: 1,
      pageSize: 5,
      total: 0,
    }
  },
  methods: {
    // 获取表格数据
    getTableData(currPage, pageSize) {
      let token= this.userInfo.token;
      this.$http({
        url: '/admin/getLogInfoList',
        method: 'get',
        params: {
          currPage,
          pageSize
        },
        headers: {Authorization: token}
      }).then(response=>{
        let result= response.data;
        if(result.code===200) {
          let data= result.data;
          this.logData= JSON.parse(data.list);
          this.currPage= Number(data.currPage);
          this.pageSize= Number(data.pageSize);
          this.total= parseInt(data.total);
        } else {
          this.$message.warning('获取文章类型失败');
        }
      }).catch(e=>{
        this.$message.warning('获取文章类型失败');
      })
    },

    // 分页器操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currPage= 1;
      this.pageSize= val;
      this.getTableData(this.currPage, this.pageSize);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currPage= val;
      this.getTableData(this.currPage, this.pageSize);
    }
  },
  mounted() {
    let userInfo= window.sessionStorage.getItem('userInfo');
    this.userInfo= JSON.parse(userInfo);
    this.getTableData(1,5);
  }
}
</script>

<style scoped lang="less">
  .log-list {
    .title {
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      line-height: 40px;
      padding: 5px 10px;
      font-size: 24px;
      color: #fff;
      border-radius: 4px;
      background: #007BFF;
      margin-bottom: 20px;
    }

    .pagination-wrapper {
      margin-top: 40px;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
